<a href="{{ "getting-started/hugo/" | relURL }}"
    class="inline-flex items-center justify-between px-1 py-1 pr-4 text-sm text-gray-700 bg-gray-100 rounded-full dark:bg-gray-800 dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
    aria-label="Component requires HUGO">
    <span class="px-3 py-px mr-3 text-xs text-white bg-white rounded-full">
        <svg aria-hidden="true" class="w-6 h-6" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
            viewBox="0 0 370 391" xml:space="preserve">
        <style type="text/css">
            .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#FF4088;stroke:#C9177E;stroke-width:27;}
            .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#FFFFFF;}
        </style>
        <path class="st0" d="M207.5,22.4L321.9,89c13.5,7.9,21.9,22.4,21.9,38v136.4c0,17.3-9.3,33.3-24.5,41.8l-113.5,63.9
            c-15.1,8.5-33.5,8.4-48.5-0.2L52.8,308.8c-16.4-9.5-26.6-27-26.6-45.9V133.4c0-19.1,9.9-36.8,26.1-46.8l102.8-63.5
            C171.1,13.2,191.3,13,207.5,22.4z"/>
        <polygon class="st1" points="105.6,298.2 105.6,91 149,91 149,166.5 220.9,166.5 220.9,91 264.4,91 264.4,298.2 220.9,298.2 
            220.9,207.6 149,207.6 149,298.2 "/>
        </svg>
    </span>
    <span class="text-sm font-medium">Requires HUGO</span>
</a>